<template>
    <div class="recommend">
      <h3 class="recommend-title">热卖推荐</h3>
      <div class="loading-container" v-if="!recommends.length">
        <me-loading inline></me-loading>
      </div>
      <ul class="recommend-list" v-else>
        <li class="recommend-item" v-for="(item,index) in recommends"
            :key="index">
          <router-link class="recommend-link"
           :to="{name: 'home-product', params: {id: item.baseinfo.itemId}}">
            <p class="recommend-pic"><img class="recommend-img" v-lazy="item.baseinfo.picUrlNew"></p>
            <p class="recommend-name">{{item.name.shortName}}</p>
            <p class="recommend-origPrice"><del>¥{{item.price.origPrice}}</del></p>
            <p class="recommend-info">
              <span class="recommend-price">¥<strong class="recommend-price-num">{{item.price.actPrice}}</strong></span>
              <span class="recommend-count">{{item.remind.soldCount}}件已售</span>
            </p>
          </router-link>
        </li>
      </ul>
    </div>
</template>

<script>
  import {getHomeRecommend} from 'api/home';
  import MeLoading from 'base/loading';
  export default {
    name: 'HomemRecommend',
    components: {
      MeLoading
    },
    data() {
      return {
        recommends: [],
        curPage: 1,
        totalPage: 1
      };
    },
    created() {
      this.getRecommend();
    },
    methods: {
      update() {
        return this.getRecommend();
      },

      getRecommend() {
        // 当前页面数大于总页面数返回，不会请求
        if (this.curPage > this.totalPage) {
          return Promise.reject(new Error('没有更多了'));
        }
        // 调用 getHomeRecommend方法获取数据
        return getHomeRecommend(this.curPage).then(data => {
          return new Promise(resolve => {
            if (data) {
              // console.log(data);
              this.curPage++;
              this.totalPage = data.totalPage;
              this.recommends = this.recommends.concat(data.itemList);
              this.$emit('loaded', this.recommends);
              resolve();
            }
          });
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "~assets/scss/mixins";
  .recommend{
  &-title{
    position: relative;
    width: 100%;
    padding: 10px 0;
    font-size: $font-size-l;
    text-align: center;

    &:before,&:after {
      content: '';
      position: absolute;
      top: 50%;
      margin-top: -1;
      width: 40%;
      height: 1px;
      background-color: #ddd;
    }
    &:before{
      left:0;
    }
    &:after{
      right:0;
    }
  }
  &-list{
  @include flex-between();
    flex-wrap: wrap;
  }
  &-item{
    width: 49%;
    background-color: #fff;
    box-shadow: 0 1px 0 1px rgba(0,0,0,0.12);
    margin-bottom: 8px;
  }
    &-pic{
      position: relative;
      width: 100%;
      padding-top: 100%;
    }
    &-link{
    display: block;
  }
  &-img{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
  }
    &-name {
      height: 36px;
      padding: 0 5px;
      margin-bottom: 8px;
      line-height: 1.5;
      @include multiline-ellipsis();
    }

    &-origPrice {
      padding: 0 5px;
      margin-bottom: 8px;
      color: #ccc;
    }

    &-info {
      @include flex-between();
      padding: 0 5px;
      margin-bottom: 8px;
    }

    &-price {
      color: #e61414;
    }

    &-price-num {
      font-size: 20px;
    }

    &-count {
      color: #999;
    }
}
  .loading-container{
    padding-top: 100px;
  }
</style>
